<div>
  <div class="mb-3">
    <div class="input-group mb-3 hidden">
      <span class="input-group-text">URL {{$ctrl.options.viewport}}</span>
      <input
        type="text"
        onclick="this.select()"
        ng-model="$ctrl.srcUrl"
        class="form-control hidden"
        placeholder="https://your-image-url..."
      />
    </div>
    <div class="input-group">
      <div class="custom-file">
        <input
          id="{{$ctrl.id}}"
          accept="image/*"
          type="file"
          name="pic-{{$ctrl.id}}"
          ngf-select="$ctrl.selectFile($files)"
          data-files="file.files"
          class="hidden"
        />
        <label class="custom-file-label" for="{{$ctrl.id}}"
          >Upload file...</label
        >
      </div>
    </div>
  </div>
  <div class="row">
    <!-- Croppie needs a container -> using 'boundary' option -->
    <div class="col-sm-12">
      <croppie
        ng-if="$ctrl.cropped.source"
        src="$ctrl.cropped.source"
        ng-model="$ctrl.cropped.image"
        viewport-w="$ctrl.options.viewport.width"
        viewport-h="$ctrl.options.viewport.height"
        output-w="$ctrl.options.output.width"
        output-h="$ctrl.options.output.height"
        on-update="$ctrl.combineImage()"
        options="$ctrl.options"
      ></croppie>
    </div>
    <!-- <div class="col-sm-6">
            <img id="result" class="ml-auto mr-auto d-none" ng-src="{{$ctrl.postedFile.fileStream}}" width="{{$ctrl.options.render.width}}"
                height="{{$ctrl.options.render.height}}" /><br>
            <a class="btn btn-default" ng-if="$ctrl.postedFile.fileName" ng-click="$ctrl.saveCanvas()">Save</a>
            <canvas id="canvas-{{$ctrl.id}}" class="ml-auto mr-auto d-none" style="position:absolute"
                width="{{$ctrl.options.output.width}}" height="{{$ctrl.options.output.height}}"></canvas>
            <img id="croppie-src" class="ml-auto mr-auto d-block" style="position:absolute;top:0"
                ng-src="{{$ctrl.cropped.image}}" width="{{$ctrl.options.boundary.width}}" height="{{$ctrl.options.boundary.height}}"/>
            <input type="hidden" value="{{$ctrl.type}}/{{$ctrl.folder}}" class="folder-val">
        </div> -->
  </div>
</div>
